<template>
  <div v-if="isim" class="isim">
    <el-badge :value="queueNum" :max="99" class="item" v-show="queueNum">
    </el-badge>
    <div :class="[status ? 'cust_' + status : 'cust_status_unknow', im.userStatus !== 'online' ? 'active' : '']" :style="styleObject">
      <span class="status_name" :class="{'icon-tixingweizhi': status === 'status_unknow' || !status}" :style="styleFontSize" v-text="statusName()"></span>
      <i :class="[im.userStatus === 'online' ? 'im_' + im.platform : 'im_' + im.platform + ' active']"></i>
    </div>
  </div>
  <div class="isim__div" v-else>
    <span :class="[status ? 'cust_' + status : 'cust_status_unknow']" :style="styleObject">
      <span class="status_name" :class="{'icon-tixingweizhi': status === 'status_unknow' || !status}" :style="styleFontSize" v-text="statusName()"></span>
      <el-badge :value="queueNum" :max="99" class="item" v-show="queueNum">
      </el-badge>
    </span>
    <i v-show="iscall" :class="[call ? 'call_'+call : 'call_normal']"></i>
    <i :class="{businessIsRead: !isRead && type === 'business_my', callIsRead: isRead && type === 'cdr_call'}"></i>
  </div>
</template>
<script>
  import { statusCustColorArr } from '@/utils/reportUtils'
  export default {
    name: 'CustomerAvatar',
    props: {
      status: String,
      size: Number,
      isim: Boolean,
      iscall: Boolean,
      im: Object,
      call: String,
      isRead: {type: Boolean, default: true},
      type: String,
      queueNum: {type: Number, default: 0}
    },
    data () {
      return {
        colors: statusCustColorArr
      }
    },
    computed: {
      styleObject: function () {
        return {
          width: this.size + 16 + 'px',
          height: this.size + 16 + 'px',
          color: this.currentColor(),
          fontSize: this.currentFontSize(),
          backgroundColor: this.currentColor()
        }
      },
      styleFontSize: function () {
        return {
          fontSize: this.currentFontSize()
        }
      }
    },
    methods: {
      statusName () {
        let custTmpls = this.$getCache('custTmpls')
        if (this.status && custTmpls[0]) {
          let cs = custTmpls[0].status[this.status]
          if (cs) {
            return (cs.length >= 2 ? cs.substring(0, 2) : cs).toLocaleUpperCase()
          } else {
            return this.status !== 'status_unknow' ? '--' : ''
          }
        } else {
          return ''
        }
      },
      currentColor () {
        let statusConfig
        let custTmpls = this.$getCache('custTmpls')
        if (custTmpls[0]) {
          statusConfig = custTmpls[0].statusConfig
        }
        if (this.status) {
          if (statusConfig && statusConfig[this.status]) {
            return statusConfig[this.status].color
          } else {
            return this.colors[this.status] ? this.colors[this.status] : '#009FE3'
          }
        }
      },
      currentFontSize () {
        if (this.status === 'status_unknow') {
          return this.size ? this.size + 'px' : '16px'
        } else {
          if (this.status) {
            return this.size ? this.size / 2 + 4 + 'px' : '16px'
          } else {
            return this.size ? this.size + 'px' : '16px'
          }
        }
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../assets/common.styl'
  [class^="cust_status"]
    position relative
    background: #FBB100
    border-radius: 50%
    box-sizing: border-box
    text-align: center
    color: #fff
    display: flex
    align-items: center
  .status_name
    display: block
    text-align: center
    color #fff
    width: 100%
  [class^='im_'],[class^='call_']
    padding 4px
    background $cf-white
    position absolute
    left 22px
    top 26px
    border-radius 50%
  [class^="cust_status"],[class^='im_'],[class^='call_']
    font-family "iconfont" !important
    font-style normal
    -webkit-font-smoothing antialiased
  [class^="cust_status"]
    font-size 20px
  [class^='im_']
    font-size 14px
  [class^='call_']
    font-size 12px
  [class^="cust_status"]:before
    color $cf-white
    padding 8px
    border-radius 50%
/*  .cust_status0:before
    background #9761AD
    content "\E652"
  .cust_status0  [class^="im_"]
    color #9761AD
  .cust_status1:before
    background #ED5870
    content "\E647"
  .cust_status1  [class^="im_"]
    color #ED5870
  .cust_status2:before
    background #F48C4D
    content "\E640"
  .cust_status2  [class^="im_"]
    color #F48C4D
  .cust_status3:before
    background #FBB100
    content "\E685"
  .cust_status3  [class^="im_"]
    color #FBB100
  .cust_status4:before
    background #79B05D
    content "\E645"
  .cust_status4  [class^="im_"]
    color #79B05D
  .cust_status5:before
    background #5F89BB
    content "\E64B"
  .cust_status5  [class^="im_"]
    color #5F89BB
  .cust_status6:before
    background $c-sub6
    content "\E646"
  .cust_status6  [class^="im_"]
    color $c-sub6
  .cust_status7:before
    background #9761AD
    content "\e6a6"
  .cust_status7  [class^="im_"]
    color #9761AD
  .cust_status8:before
    background #BBC9D6
    content "\E649"
  .cust_status8  [class^="im_"]
    color #BBC9D6
  .cust_status9:before
    background #CECECE
    content "\e691"
  .cust_status9  [class^="im_"]
    color #CECECE*/
  .icon-tixingweizhi
    text-align: center
    width: 100%
    color: #fff
    border: none
    /*background #009FE3*/
  .cust_status_unknow
    background #009FE3
    /*content "\E64D"*/
  .cust_status_unknow  [class^="im_"]
    color #009FE3
    /*background #009FE3*/
  .im_pc:before
    content "\e65b"
  .im_weixin:before
    content "\e651"
  .im_wxmini:before
    content "\e651"
  .im_wap:before
    content "\e66d"
  .im_sdk:before
    content "\e671"
  .im_weibo:before
    content "\e6d1"
  .el-menu-item:hover [class^="call_"],.el-menu-item.is-active [class^="call_"]
    background: $c-card
  [class^='im_'].active
    color #DAD8DA
  [class^="cust_status"].active:before
    background:#DAD8DA
  [class^="cust_status"].active
    background:#DAD8DA  !important
  .call_dialout:before,.call_dialTransfer:before
    content "\e64f"
    color #44B7AE
  .call_normal:before,.call_transfer:before
    content "\e674"
    color #F5A628
  .businessIsRead, .callIsRead
    display block
    position absolute
    width 10px
    height 10px
    background #ff4949
    border-radius 50%
    right 0
    border: 2px solid $cf-white
  .businessIsRead
    top -4px
  .callIsRead
    top -6px
  .el-menu-item.is-active .card [class^='im_'].active
    background: $c-card
  .card:hover [class^='im_']
    background $c-card
  .el-menu-item.is-active .card [class^='im_']
    background: $c-card
  .item
    margin-top -30px
    margin-left -16px
  .isim
    position relative
    .item
      margin 0
      position absolute
      z-index 5
      left 26px
      top -15px
  .isim__div
    display inline-block

  /*
    在线咨询卡片，未读消息数位置更改
  */
  .webchat_card
    .isim
      .item
        top -10px
  /*
    邮件卡片，未读消息数位置更改
  */
  .email-card
    .email_card_li
      .item
        margin-top -24px
</style>
